<template>
  <div>
    <div id="main" ref="chart"></div>
  </div>
</template>

<script>
import axios from "axios";
var echarts = require("echarts");
function parsedata(i) {
  var now = new Date(Math.floor(i["time"]*1000));
  return [
    [now.getHours(), now.getMinutes(), now.getSeconds()].join(':'),
    i["byte"]
  ]
}
export default {
  name: "udpdata",
  data() {
    return {
      data: {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '100%'];
          }
        },
        title: {
          left: 'center',
          text: 'UDP流量',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }, {
          start: 0,
          end: 100
        }],
        series: [
          {
            name: '',
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {},
            data: []
          }
        ]
      }
    }
  },
  watch: {
    // host() {
    //   var that=this;
    //   var i = 0;
    //   var chart = echarts.init(that.$refs.chart)
    //   chart.setOption(that.data);
    //   this.timer = window.setInterval(() => {
    //     setTimeout(() => {
    //       that.data.series[0].data.push(tempdata[i]);
    //       console.log(that.data.series[0].data);
    //       i++;
    //       chart.setOption(that.data)
    //     },0)
    //   },200)
    // },
    docker() {
      var that=this;
      var chart = echarts.init(that.$refs.chart)
      chart.setOption(that.data);
      this.timer = window.setInterval(() => {
        setTimeout(() => {
          // that.data.series[0].data.push(tempdata[i]);
          // console.log(that.data.series[0].data);
          // i++;
          axios.get("http://127.0.0.1:5000/getnetdata?dockerip=" + this.docker + "&hostip=" + this.host + "&protocol=udp").then(
              function (res) {
                console.log(res.data)
                that.data.series[0].data.push(parsedata(res.data));
                chart.setOption(that.data)
              }
          )
          chart.setOption(that.data)
        },0)
      },2000)
    }
  },
  props: [
    "docker",
    "host"
  ]
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#main {
  width: 44em;
  height: 200px;
}
</style>